﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>QlikView Mashups - Simple Object Integration</title>
    <link type="text/css" href="library/css/reset.css"  rel="stylesheet"/>
    <link type="text/css" href="library/css/smoothness/jquery-ui-1.9.1.custom.css"  rel="stylesheet"/>
    <link type="text/css" href="library/css/style.css"  rel="stylesheet"/>
    
    <script language="javascript" type="text/javascript" src="library/js/jquery-1.8.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="library/js/jquery-ui-1.9.1.custom.js"></script>
    <script language="javascript" type="text/javascript" src="library/js/QlikViewMashups.js"></script>

    <script type="text/javascript" language="javascript">
        $(function () {

            // Parameter Example Table
            $("#tblParameters tr:even td").addClass('evenRow');
            $("#tblParameters tr:odd td").addClass('oddRow');

            // Tabs
            $("#tabs").tabs();

            // Buttons
            // Examples
            $(".lnkExample").button({
                icons: { primary: "ui-icon-link" }
            });

            // Example Dialogs
            $('#lnkExample1').click(function () {
                var url = qvAjax_Path + "singleobject.htm?document=" + docPath_WhatsNew + "&object=CH05";
                var title = 'Simple Integration: Sales Trends';
                openExample(url, title, 500, 400);
            });

            $('#lnkExample2_1').click(function () {
                var url = qvAjax_Path + "singleobject.htm?document=" + docPath_WhatsNew + "&object=CH38&select=LB01,NORDIC,GERMANY";
                var title = 'Customer Sales by Locations: Nordic and Germany';
                openExample(url, title, 700, 300);
            });

            $('#lnkExample2_2').click(function () {
                var url = qvAjax_Path + "singleobject.htm?document=" + docPath_WhatsNew + "&object=CH38&select=LB01,USA";
                var title = 'Customer Sales by Locations: USA';
                openExample(url, title, 700, 300);
            });

            $('#lnkExample3_1').click(function () {
                var url = qvAjax_Path + "singleobject.htm?document=" + docPath_WhatsNew + "&bookmark=Document\\BM01&object=CH08&select=LB01,GERMANY&select=LB02,2010&select=LB03=Q1";
                var title = 'Customer Report: Germany in Q1/2010';
                openExample(url, title, 600, 400);
            });
            $('#lnkExample3_2').click(function () {
                var url = qvAjax_Path + "singleobject.htm?document=" + docPath_WhatsNew + "&bookmark=Document\\BM01&object=CH08&select=LB01,SPAIN&select=LB02,2010&select=LB03=Q1";
                var title = 'Customer Report: Spain in Q1/2010';
                openExample(url, title, 600, 400);
            });

            function openExample(url, title, winWidth, winHeight) {

                $("#ifrExample").attr("src", "library/content/loading.html");
                $("#ifrExample").width(winWidth - 50);
                $("#ifrExample").height(winHeight - 50);

                $("#ifrExample").one('load', function () {
                    $("#ifrExample").attr("src", url);
                    $("#exampleDialog").dialog({
                        width: winWidth,
                        height: winHeight,
                        title: title,
                        resizable: false
                    });
                });                
            }
        });
    </script>
    <style type="text/css">
    .ui-menu { width: 250px; }

    </style>
</head>
<body>
    <div class="MainContainer">
        <div id="mnu" class="BackToIndex"><a id="mnuCaller" href="#">Menu</a></div>
        <div id="mnuContainer"></div>

        <h1>QlikView Mashups - Simple Object Integration (singleobject.htm)</h1>

        <div id="tabs">
            <ul>
                <li><a href="#tabs-introduction">Introduction</a></li>
                <li><a href="#tabs-parameters">Parameters</a></li>
                <li><a href="#tabs-examples">Examples</a></li>
            </ul>
            <div id="tabs-introduction">
                <h2 class="h2Tabs">Introduction</h2>
                <p>
                    Integrating single QlikView objects by using an IFRAME and singleobject.htm works very similar as the opendoc.htm integration.
                </p>
                The main difference between these two approaches is that
            <ul>
                <li>opendoc.htm refrences an entire QlikView application (including all sheets, toolbar, and so on).</li>
                <li>singleobject.htm references only a single object</li>
            </ul>
                <br />
                <br />
                On the other hand singleobject.htm integration and <a href="QlikView_Mashups_3.html" class="lnkBlue">DIV integration</a> is very similar:
            <ul>
                <li>Both approaches bring a single object into your existing web application</li>
                <li>For a full comparison of these two approaches please visit <a href="QlikView_Mashups_4.html" class="lnkBlue">this site</a></li>
            </ul>
            </div>
            <div id="tabs-parameters">
                <h2>Parameters</h2>
                <div>
                    <p>
                        Use the following parameters to define the behaviour how a QlikView object
                        should be integrated into your website:
                    </p>
                    <table id="tblParameters" style="width: 80%; margin-left: 60px;">
                        <thead>
                            <tr>
                                <th width="20%">QueryString Parameter
                                </th>
                                <th width="50%">Explanation
                                </th>
                                <th width="30%">Example
                                </th>
                            </tr>
                        </thead>
                        <tr>
                            <td>document
                            </td>
                            <td>Specify the path to the document on server
                            </td>
                            <td class="codeIt">document=Sales%20Compass.qvw
                            </td>
                        </tr>
                        <tr>
                            <td class="">object
                            </td>
                            <td class="">Specify the Id of the QlikView object
                            </td>
                            <td class="codeIt">object=LB1022
                            </td>
                        </tr>
                        <tr>
                            <td class="">bookmark
                            </td>
                            <td class="">Specify the bookmark which should be called (using the ID of the bookmark)
                            </td>
                            <td class="codeIt">bookmark=Document\BM01
                            </td>
                        </tr>
                        <tr>
                            <td class="">select
                            </td>
                            <td class="">Specify any selection using field names and values<br />
                                <small><i>(Have a look at the examples below)</i></small>
                            </td>
                            <td class="codeIt">select=LB01,Germany
                            </td>
                        </tr>
                        <tr>
                            <td class="">ticket
                            </td>
                            <td class="">40 hex string that was returned by the Ticket webservice
                            </td>
                            <td class="codeIt"></td>
                        </tr>
                        <tr>
                            <td class="">host
                            </td>
                            <td class="">Host IP of the QlikView Server (optional if running on localhost)
                            </td>
                            <td class="codeIt">host=local
                            </td>
                        </tr>
                    </table>
                </div>

                <h2>Parameter Examples</h2>
                <div>
                    <table style="width: 80%; margin-left: 60px;">
                        <thead>
                            <tr>
                                <th style="min-width: 150px;">Action</th>
                                <th>Example</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="oddRow">Single selection (Germany) in listbox with ID = LB01</td>
                                <td class="oddRow codeIt">select=LB01,Germany</td>
                            </tr>
                            <tr>
                                <td class="evenRow">Multiple selection in one list box</td>
                                <td class="evenRow codeIt">select=LB01,Germany,USA</td>
                            </tr>
                            <tr>
                                <td class="oddRow">Multiple selection in multiple list boxes</td>
                                <td class="oddRow codeIt">select=LB01,Germany,Argentina&amp;select=LB02,AnotherDimension</td>
                            </tr>
                            <tr>
                                <td class="evenRow">Specify if it's a server or document object (document is default)</td>
                                <td class="evenRow codeIt">select=Document\LB01,Germany,USA
                                </td>
                            </tr>
                            <tr>
                                <td class="oddRow">Select a bookmark</td>
                                <td class="oddRow codeIt">bookmark=Document\BM01</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <br />
                <br />
                <br />
                <br />
                <br />

            </div>
            <div id="tabs-examples">
                <div id="exampleDialog" class="hidden" title="" style="width: 300px; height: 200px;">
                    <iframe id="ifrExample" src="library/content/blank.html" seamless scrolling="no"></iframe>
                </div>
                <h2>Examples</h2>
                <p>
                    The examples below make use of the demo application "What's new in QlikView11" which can be <a href="http://eu.demo.qlikview.com/QvAJAXZfc/AccessPoint.aspx?open=&id=Demo11%7Cqvdocs/Whats%20New%20in%20QlikView11.qvw&client=Download" class="lnkBlue" target="_blank">downloaded</a> and <a href="http://eu.demo.qlikview.com/detail.aspx?appName=Whats%20New%20in%20QlikView11.qvw" class="lnkBlue" target="_blank">viewed at http://demo.qlikview.com</a>
                </p>

                <hr />
                <div id="Example_1">
                    <h3>Simple integration of an object</h3>
                    <p>
                        Calls an object "Sales Trends" from the document "What's New in QlikView11" (with the object Id CH05)
                    </p>

                    <div>
                        <pre class="wrapped">
                    &lt;iframe src="http://localhost/QvAJAXZfc/singleobject.htm?<span class="redBold">document</span>=Whats%20New%20in%20QlikView11.qvw&<span class="redBold">object</span>=CH05" /&gt;
                    </pre>
                    </div>
                    <br />
                    <button id="lnkExample1" class="lnkExample">Load Example</button>
                    <hr />
                </div>

                <div id="Example_2">
                    <h3>Preselecting values</h3>
                    <p>
                        The two examples below load the same chart ("Customer Sales by Region") from the "What's New in QlikView11" application but with different selections.
                    </p>

                    <div>
                        <pre class="wrapped">
                    &lt;iframe src="http://localhost/QvAJAXZfc/singleobject.htm?<span class="redBold">document</span>=Whats%20New%20in%20QlikView11.qvw&<span class="redBold">object</span>=CH38&<span class="redBold">select</span>=LB01,NORDIC,GERMANY" /&gt;
                    </pre>
                    </div>
                    <br />
                    <button id="lnkExample2_1" class="lnkExample">Example 1: "Nordics and Germany"</button>
                    <button id="lnkExample2_2" class="lnkExample">Example 2: "USA"</button>
                    <hr />
                </div>

                <div id="Example_3">
                    <h3>Calling a bookmark and several selections</h3>
                    <p>
                        The example below loads a straight table ("Report") from the "What's New in QlikView11" application by calling a bookmark ("Customer Report") but with different selections.
                    </p>

                    <div>
                        <ul>
                            <li>Selection 2010 in field Year (list box with the Id LB02)</li>
                            <li>Selection Q1 in field Quarter (list box with the Id LB03)</li>
                            <li>Selection of the region "GERMANY"</li>
                        </ul>
                        <br />
                        <pre class="wrapped">
                    &lt;iframe src="http://localhost/QvAJAXZfc/singleobject.htm?<span class="redBold">document</span>=Whats%20New%20in%20QlikView11.qvw&<span class="redBold">bookmark</span>=Document\BM01&<span class="redBold">object</span>=CH08&<span class="redBold">select</span>=LB01,GERMANY&<span class="redBold">select</span>=LB02,2010&<span class="redBold">select</span>=LB03=Q1" /&gt;
                        </pre>
                        <br />
                        <button id="lnkExample3_1" class="lnkExample">Customer Report: Germany in Q1/2010</button>
                    </div>
                    <br />

                    <div>
                        <ul>
                            <li>Selection 2010 in field Year (list box with the Id LB02)</li>
                            <li>Selection Q1 in field Quarter (list box with the Id LB03)</li>
                            <li>Selection of the region "SPAIN"</li>
                        </ul>
                        <br />
                        <pre class="wrapped">
                    &lt;iframe src="http://localhost/QvAJAXZfc/singleobject.htm?<span class="redBold">document</span>=Whats%20New%20in%20QlikView11.qvw&<span class="redBold">bookmark</span>=Document\BM01&<span class="redBold">object</span>=CH08&<span class="redBold">select</span>=LB01,SPAIN&<span class="redBold">select</span>=LB02,2010&<span class="redBold">select</span>=LB03=Q1" /&gt;
                        </pre>
                        <br />
                        <button id="lnkExample3_2" class="lnkExample">Customer Report: Spain in Q1/2010</button>
                    </div>
                    <br />
                    
                    <hr />
                </div>
            </div>
        </div>
    </div>


    
<div id="divCopyright" class="Copyright"></div>
</body>
</html>
